import { CommandDialog, Types } from '@amcax/base';
import i18n from '@app-cad/common/utils/i18next';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { Select } from 'antd';
import { useEffect, useState } from 'react';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { PointProjection } from './point';
import { CurveProjection } from './curve';

const CommandProjection = ({
  title,
  onClose,
  props,
}: CurvedCmdDialogParams) => {
  const [mode, setMode] = useState<'point' | 'curve'>('point');

  // props需要为state，以确保props和mode同时更新，分发的模式不会收到错误的props
  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  useEffect(() => {
    if (props?.type === Types.POINT) {
      setMode('point');
    } else if (props?.type === Types.CURVE) {
      setMode('curve');
    }
    setEditProps(props);
    setEditDxid(props?.shape);
  }, [props?.shape]);

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'
    >
      <CommandLabeledItemWrapper
        className='mt-5 px-5'
        label='类型'
      >
        <Select
          disabled={editDxid != null}
          options={[
            { value: 'point', label: '点' },
            { value: 'curve', label: '曲线' },
          ]}
          value={mode}
          onChange={(val) => {
            if (val !== mode) {
              setMode(val);
              setEditProps(null);
            }
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === 'point' && (
        <PointProjection
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'curve' && (
        <CurveProjection
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
    </CommandDialog>
  );
};

export const cmdProjection: CurvedBaseCommand = {
  id: 'CmdProjection',
  label: 'command.projection',
  icon: 'commands/curved/point-projection',
  create: (label, onClose, props) => (
    <CommandProjection
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
